<template>
    <div class="body">
      <home-header></home-header>
      <home-swiper :swiper="swiper"></home-swiper>
      <home-icon :iconlist="iconlist"></home-icon>
      <home-tuijian :tuijian="tuijian"></home-tuijian>
      <home-weekend :weekend="weekend"></home-weekend>
    </div>
</template>

<script>
import header from './components/HomeHeader'
import swiper from './components/Swiper'
import icon from './components/HomeIcon'
import tuijian from './components/Tuijian'
import weekend from './components/weekend'
import axios from 'axios'
import { mapState } from 'vuex'
export default {
  name: "home",
  components:{
  HomeHeader:header,
  HomeSwiper:swiper,
  HomeIcon:icon,
  HomeTuijian:tuijian,
  HomeWeekend:weekend
  },
  data () {
    return {
      lastcity:'',
      swiper:[],
      iconlist:[],
      tuijian:[],
      weekend:[]
    }
  },
  computed:{
    ...mapState(['nowCity'])
  },
  methods:{
    getHomeInfo (){
      axios.get('../../../static/mock/index.json?city='+this.nowCity)
        .then(this.getHomeInfoSuccess)
    },
    getHomeInfoSuccess(res){
      res =res.data
      if(res.ret&&res.data){
        const data = res.data
        this.swiper = data.swiperList
        this.iconlist = data.iconList
        this.tuijian = data.recommendList
        this.weekend = data.weekendList
      }
    }
  },
  mounted (){
    this.lastcity = this.nowCity
    this.getHomeInfo()
  },
  activated (){
    if(this.lastcity !== this.nowCity){
      this.lastcity = this.nowCity
      this.getHomeInfo()
    }
  }
}
</script>

<style scoped>
  .body{ background: #f5f5f5}
</style>
